import { Button, Form, Input, Table } from 'antd'
import { useState } from 'react'
import Glass from './glass'
import styles from './home.module.less'
import IdCard from './idcard'
import { phoneApi } from './phoneApi'
import Proess from './proess'
import Video from './video'

type IPhoneInfo = { areacode: string; card: string; city: string; company: string; province: string; zip: string }

const TableTitle = [
  { title: '省份', key: 'province', dataIndex: 'province', align: 'center' as 'center' },
  { title: '城市', key: 'city', dataIndex: 'city', align: 'center' as 'center' },
  { title: '邮编', key: 'zip', dataIndex: 'zip', align: 'center' as 'center' },
  { title: '区号', key: 'areacode', dataIndex: 'areacode', align: 'center' as 'center' },
  { title: '公司', key: 'company', dataIndex: 'company', align: 'center' as 'center' },
  { title: 'card', key: 'card', dataIndex: 'card', align: 'center' as 'center' },
]

export default function Home() {
  const [phoneInfo, setPhoneInfo] = useState<IPhoneInfo[]>([])

  return (
    <div id={styles.home}>
      <Form
        onFinish={(values) => {
          phoneApi(`phoneNo=${values.phoneNo}`).then((res) => {
            setPhoneInfo([res] as unknown as IPhoneInfo[])
          })
        }}
      >
        <Form.Item
          key={'phoneNo'}
          name={'phoneNo'}
          rules={[
            {
              required: true,
              message: '请输入手机号',
            },
            {
              required: false,
              pattern: new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/, 'g'),
              message: '请输入正确的手机号',
            },
          ]}
        >
          <Input type={'tel'} placeholder={'请输入查询手机号'}></Input>
        </Form.Item>
        <Form.Item>
          <Button type='primary' htmlType={'submit'}>
            查询
          </Button>
        </Form.Item>
      </Form>
      <Table size={'small'} rowKey={(row) => row.card} columns={TableTitle} dataSource={phoneInfo} />
      <IdCard />
      <Video />
      <Proess />
      <Glass />
    </div>
  )
}
